<template>
    <view>
        <cu-custom class="bgmains" bgColor="bgmains" :isBack="true">
            <view slot="content">我的优惠券</view>
        </cu-custom>
        
		<view style="position: relative;">
			<image :src="fileUrl+'coupon.png'" mode="widthFix" style="width: 100%;"></image>
			<view class="box padding">
				<view class="tab flex" v-if="1==2">
					<view class="tab_item text-df text-bold" :class="tab_index==0?'active1':''" @click="tab_index=0">当前可领</view>
					<!-- <view class="tab_item text-df text-bold" :class="tab_index==1?'active':''" @click="tab_index=1">当前可用</view> -->
				</view>

                 <view class="" v-if="mylist.length > 0">
                            <view class="margin-top-lg margin-bottom coupon_item padding flex justify-between align-center" v-for="(item, index) in mylist" :key="index" :data-title="item.c_name"
                            :data-y_money="item.price"
                            :data-cut_num="item.cut_num"
                            :data-type="item.type"
                            v-if="mylist.length != 0"
                            @tap="handleUser"
                            :data-id="item.id">
                                <view class="type_name text-df">{{ item.type == 0 ? '立减券' : '满减券' }}</view>
                                <!-- <view class="badge_box">
                                <view class="badge"></view>
                            </view> -->
                                <view class="text-xl text-white">{{ item.c_name }}</view>
                                <view style="position: relative;" class="justify-between">
                                    <image :src="fileUrl + 'coupon_item.png'" style="width: 250rpx;" mode="widthFix"></image>
                                    <view style="position: absolute;top: 10%;height: 100rpx;width: 100%;" class="flex-direction justify-between flex align-center">
                                        <view class="orange text-xxl">￥{{ item.price }}</view>
                                        <view class=" text-df" v-if="item.type != 0 && item.cut_num > fee">未满足使用条件</view>
                                        <view class=" text-df" v-else>
                                            <block v-if="fee > 0">
                                                立即使用
                                            </block>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>



				<view class="" v-if="list.length>0">
					<view class="margin-top-lg margin-bottom coupon_item padding flex justify-between align-center" v-for="(item, index) in list" :key="index" :data-id="item.o_id" v-if="list.length != 0" @tap="$throttle(handleGet,5000,item.o_id)">
						<view class="type_name text-df">{{item.type==0?'立减券':'满减券'}}</view>
						<!-- <view class="badge_box">
							<view class="badge"></view>
						</view> -->
						<view class="text-xl text-white">{{item.c_name}}</view>
						<view style="position: relative;" class="justify-between">
							<image :src="fileUrl+'/coupon_item.png'" style="width: 250rpx;" mode="widthFix"></image>
							<view style="position: absolute;top: 10%;height: 100rpx;width: 100%;" class="flex-direction justify-between flex align-center">
								<view class="orange text-xxl">￥{{item.price}}</view>
								<view class="orange text-df">立即领取</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view v-if="list.length==0" class="text-df text-center margin-top">暂无可领~</view> -->
				 <!-- v-if="fee>0" -->
                <block>
                    <view class="tab flex"  v-if="1 == 2">
                        <!-- <view class="tab_item text-df text-bold" :class="tab_index == 0 ? 'active' : ''" @click="tab_index = 0">当前可领</view> -->
                        <view class="tab_item text-df text-bold" :class="tab_index == 1 ? 'active1' : ''" @click="tab_index = 1">当前可用</view>
                    </view>
                   
                    <!-- <view v-if="mylist.length==0" class="text-df text-center margin-top">暂无可用~</view> -->
                </block>
            
            </view>
		</view>
		
      </view>
</template>

<script>
var app = getApp();
export default {
    data() {
        return {
            showNodata: false,
            erranderId: 2,
            address: {
                available: []
            },

            fee: '',
            mylist: '',
            list: '',
            form: {},
            yhj_list: [],
			tab_index:0
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.tab_index=options.type-1
        console.log('接收的金额', options);
        this.setData({
            fee: Number(Number(options.total) + Number(options.coupon)).toFixed(2)
        });
        this.getData();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        getData() {
            var self = this;
            self.getDataCupon();
            app.globalData.util.request({
                url: 'UserCoupon/index',
                data: {
                    s_id: uni.getStorageSync('schoolId'),
					use_status:0
                },

                success(res) {
                    console.log('21222', res);
                    if (res.data.data) {
                          self.setData({
                            mylist: res.data.data
                        });
                    } else {
                          self.setData({
                            mylist:[]
                        });
                    }
                  
                }
            },true);
        },

        async getDataCupon() {
            await this.login().then((res) => {
                console.log("您已登陆！");
            })
            var self = this;
            app.globalData.util.request({
                url: 'UserCoupon/couponindex',
                data: {
                    s_id: uni.getStorageSync('schoolId'),
                },
                success(res) {
					console.log("可领取",res.data.data)
                    self.setData({
                        list: res.data.data||[]
                    });
                }
            },true);
        },

        handleGet(e) {
            var self = this;
            app.globalData.util.request({
                url: 'UserCoupon/add',
                data: {
                    o_id: e,
                    s_id: uni.getStorageSync('schoolId')
                },

                success(res) {
                    setTimeout(() => {
                        self.getData();
                    }, 500);
					// self.getDataCupon()
					// self.list = [];
                }
            },true);
        },

        handleUser(e) {
            var pages = getCurrentPages(); //获取当前页面信息栈

            var prevPage = pages[pages.length - 2];
			console.log(e)
            if (prevPage.route == 'gc_school/pages/public/index') {
                console.log("上个页面传过来的",this.fee);
                console.log('所选优惠券', e.currentTarget.dataset);
				
                if (((Number(this.fee) < Number(e.currentTarget.dataset.y_money) && (e.currentTarget.dataset.type==0)) || (Number(this.fee) < Number(e.currentTarget.dataset.cut_num) && (e.currentTarget.dataset.type==1)))) {
                   if (e.currentTarget.dataset.type ==1) {
                     uni.showToast({
                            title: '未满足使用条件',
                            icon: 'none'
                        });
                   } else {
                        prevPage.setData({
                            form: { ...prevPage.data.form, co_id: e.currentTarget.dataset.id, y_money: Number(this.fee), co_title: e.currentTarget.dataset.title }
                        });
                        uni.navigateBack({
                            cupon: e.currentTarget.dataset.id
                        });
                        return
                   }
                   
                   
                } else {
                    prevPage.setData({
                        form: { ...prevPage.data.form, co_id: e.currentTarget.dataset.id, y_money: e.currentTarget.dataset.y_money, co_title: e.currentTarget.dataset.title }
                    });
                    uni.navigateBack({
                        cupon: e.currentTarget.dataset.id
                    });
                }
            } else {
                uni.navigateBack({
                    id
                });
            }
        },

        del() {
            console.log('占位：函数 del 未声明');
        }
    }
};
</script>
<style lang="scss">
/* gc_school/pages/cupon/index.wxss */
page{
	background-color: white;
}
.list {
    padding: 20rpx;
}

.yhj_cont {
    padding: 0 20rpx;
    color: #cdcccc;
}

.j_left {
    border-top: 10rpx solid #eca72c;
    border-radius: 10rpx;
    box-shadow: 0 10rpx 10px #f0f0f0;
    background: #fff;
}

.j_left .j_l_top {
    padding: 10rpx 0;
    border-bottom: 2rpx dashed #eca72c;
    color: #eca72c;
}

.j_l_bot {
    font-size: 24rpx;
    color: #a6a6a6;
    padding: 20rpx 0;
}

.dian {
    width: 10rpx;
    height: 10rpx;
    margin-right: 10rpx;
    background: #eca72c;
    border-radius: 50%;
    display: inline-block;
}

.j_right {
    width: 25%;
}

.label {
    background: #f0ac2d;
    color: #fff;
    padding: 5rpx 20rpx;
    border-radius: 10rpx;
    font-size: 24rpx;
}

.j_left.failure {
    border-top: 10rpx solid #cdcccc;
    box-shadow: 0 10rpx 10rpx #cdcccc;
    background: #f8f8f8;
}

.j_left.failure .j_l_top {
    border-bottom: 2rpx dashed #cdcccc;
    color: #cdcccc;
}

.j_left.failure .j_l_bot {
    color: #cdcccc;
}

.j_left.failure .dian {
    background: #cdcccc;
}

.j_left.failure .label {
    background: #cdcccc;
}
.action {
    color: #000 !important;
}
/* .bgmain {
    background-color: #ff6344;
    color: white;
} */
/* .cuIcon-back {
    color: white;
} */
.box{
	width: 100%;
	position: absolute;
	top: 60%;
	height: 400rpx;
	// margin-top: 30rpx;
	background-color: white;
	border-top-left-radius: 40rpx;
	border-top-right-radius: 40rpx;
	.tab{
		.tab_item{
			margin-right: 20rpx;
			position: relative;
		}
		.active{
			color: #FF4C4D;
		}
		.active:after{
			background-color: #FF4C4D;
			width: 45rpx;
			height: 10rpx;
			border-radius: 20rpx;
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
			bottom: -15rpx;
		}
	}
	
	.coupon_item{
		background-color: #FF4C4D;
		border-radius: 16rpx;
		position: relative;
		.type_name{
			background-color: #FFD8AD;
			color: #FF4C4D;
			position: absolute;
			left: 0;
			top: 0;
			padding: 10rpx 20rpx;
			border-top-left-radius: 16rpx;
			border-bottom-right-radius: 16rpx;
		}
		.orange{
			color: #FF4C4D;
		}
		.badge_box{
			transform: rotate(-45deg);
			width: 100rpx;
			height: 50rpx;
			.badge{
				width: 100rpx;
				height: 40rpx;
				background-color: #FFD8AD;
				transform: perspective(0.4em) rotateX(10deg);
			}
		}
	}
}

.bgmains{
    
    background-color: #0000 !important;
    color: #fff;
    position: fixed;
    z-index: 99999999;
}
.action {
    color: #fff !important;
}

</style>
